<template>
	<view>.
		<view class="">
			<navigationBar title="三角形" btns="动画的使用" :btn="btn" :i="i" btn_color="#000000"></navigationBar>
			<view style="display: flex;flex-wrap: wrap;margin-bottom: 100rpx;">
				<!-- 三角形 -->
				<view class="triangle"></view>
				<view class="triangle1"></view>
				<!-- 梯形 -->
				<view class="triangle2"></view>
				<view class="triangle3"></view>
			</view>

			<!-- 半圆 -->
			<view style="position: absolute;">
				<view class="circle" :style="{animationDuration:time}"></view>
				<view class="circle1" style="position: absolute;top: 0;transform: rotate(120deg);"
					:style="{animationDuration:time}"></view>
				<view class="circle2" style="position: absolute;top: 0;transform: rotate(240deg);"
					:style="{animationDuration:time}"></view>
			</view>
			<view style="margin-top: 200rpx;">
				<view style="margin-left:67%;font-size: 35rpx;"> 风速:{{speed}} </view>
				<u-button class="btns" type="primary" @click="start1">1级</u-button>
				<u-button class="btns" type="primary" @click="start2">2级</u-button>
				<u-button class="btns" type="default" @click="start">{{end}}</u-button>
			</view>
			
		</view>

	</view>
</template>

<script>
	import navigationBar from "@/components/navigation-bar/navigation-bar.vue" //导航栏
	export default {
		components: {
			navigationBar
		},
		data() {
			return {
				btn: true,
				i: 4,
				time: '0s',
				count: 0,
				end:'开始',
				speed:"0级"
			}
		},
		methods: {
			start() {
				if (this.count == 0) {
					this.time = ".7s"
					this.count = 1
					this.end='停止'
					this.speed="0.5级"
				} else {
					// console.log(this.count)
					this.time = "0s"
					this.count = 0
					this.end='开始'
					this.speed="0级"
				}
			},
			start1(){
				this.time = ".5s"
				this.count = 1
				this.end='停止'
				this.speed="1级"
			},
			start2(){
				this.time = ".3s"
				this.count = 1
				this.end='停止'
				this.speed="2级"
			}
		}
	}
</script>

<style lang="scss">
	.triangle {
		margin-top: 20rpx;
		margin-left: 100rpx;
		width: 0rpx;
		height: 0rpx;
		border-left: 50rpx solid transparent;
		border-right: 50rpx solid transparent;
		border-bottom: 100rpx solid #0000FF;
	}

	.triangle1 {
		margin-top: 20rpx;
		margin-left: 100rpx;
		width: 100rpx;
		// height: 100rpx;
		border-left: 50rpx solid #ccc;
		border-right: 50rpx solid #E4370E;
		border-bottom: 100rpx solid #0000FF;
	}

	.triangle2 {
		margin-top: 20rpx;
		margin-left: 100rpx;
		width: 200rpx;
		height: 0rpx;
		border-left: 50rpx solid transparent;
		border-right: 50rpx solid transparent;
		border-bottom: 100rpx solid #0000FF;

	}

	.triangle3 {
		margin-top: 20rpx;
		margin-left: 100rpx;
		width: 200rpx;
		height: 0rpx;
		border-left: 50rpx solid #ccc;
		border-right: 50rpx solid #E4370E;
		border-bottom: 100rpx solid #0000FF;
	}

	.circle {
		margin-left: 50rpx;
		margin-top: 150rpx;
		width: 200rpx;
		height: 100rpx;
		background-color: #cccccc;
		border-radius: 100rpx 100rpx 0 0;
		transform: rotate(0deg);
		transform-origin: bottom right;//旋转中心
		animation-name: example;//绑定的关键帧
		// animation-duration: 5s;//动画完成所需时间
		animation-iteration-count: infinite;//动画播放次数
		animation-direction: normal;
		animation-timing-function: linear;//动画执行的周期函数

		.b_circle {
			width: 100%;
			height: 50%;
			border-radius: 100rpx 120rpx 0 0;
			background-color: #ffffff;
		}
	}

	@keyframes example {//执行当前帧元素的状态
		0% {
			// background-color: red;

		}
		50% {
			// background-color: blue;
			transform: rotate(180deg);
		}
		100% {
			// background-color: red;
			transform: rotate(360deg);
		}
	}

	.circle1 {
		margin-left: 50rpx;
		margin-top: 150rpx;
		width: 200rpx;
		height: 100rpx;
		background-color: #cccccc;
		border-radius: 100rpx 100rpx 0 0;
		transform: rotate(120deg);
		transform-origin: bottom right;
		animation-name: example1;
		// animation-duration: 5s;
		animation-iteration-count: infinite;
		animation-direction: normal;
		animation-timing-function: linear;

		.b_circle {
			width: 100%;
			height: 50%;
			border-radius: 100rpx 120rpx 0 0;
			background-color: #ffffff;
		}
	}

	@keyframes example1 {
		0% {
			// background-color: red;
			transform: rotate(120deg);
		}

		50% {
			// background-color: blue;
			transform: rotate(300deg);
		}

		100% {
			// background-color: red;

			transform: rotate(480deg);
		}
	}

	.circle2 {
		margin-left: 50rpx;
		margin-top: 150rpx;
		width: 200rpx;
		height: 100rpx;
		background-color: #cccccc;
		border-radius: 100rpx 100rpx 0 0;
		transform: rotate(240deg);
		transform-origin: bottom right;
		animation-name: example2;
		// animation-duration: 5s;
		animation-iteration-count: infinite;
		animation-direction: normal;
		animation-timing-function: linear;

		.b_circle {
			width: 100%;
			height: 50%;
			border-radius: 100rpx 120rpx 0 0;
			background-color: #ffffff;
		}
	}

	@keyframes example2 {
		0% {
			// background-color: red;
			transform: rotate(240deg);
		}

		50% {
			// background-color: blue;
			transform: rotate(420deg);
		}

		100% {
			// background-color: red;
			transform: rotate(600deg);

			// transform: rotate(240deg);
		}
	}
	.btns{
		width: 200rpx;
		margin-right: 50rpx;
		margin-top: 10rpx;
	}
</style>
